<template>
    <div class="users">
        <!-- 表格 -->
       <el-table :data="users">
           <el-table-column prop="id" label="编号" width="80"></el-table-column>
           <el-table-column prop="realname" label="姓名"></el-table-column>
           <el-table-column prop="telephone" label="电话"></el-table-column>
           <el-table-column prop="status" label="状态"></el-table-column>
           <el-table-column prop="gender" label="性别"></el-table-column>
           <el-table-column prop="idCard" label="身份证号码"></el-table-column>
           <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">   
               <el-button type="primary" size="small" @click="edit(scope.row)">修改</el-button>
               <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
            </template>
           </el-table-column>      
       </el-table>
    <!-- /表格 -->
        <el-dialog title="角色信息" :visible.sync="visible">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="form.realname" clearable placeholder="请输入栏目名称"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" clearable placeholder="请输入身份证号"></el-input>
        </el-form-item>
         <el-form-item label="手机号" prop="telephone">
          <el-input
            v-model="form.telephone"
            clearable
            placeholder="请输入手机号"
            maxlength="11"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
       <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button size="small" type="primary" @click="submit('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import{ get,post } from "@/utils/request";
export default {
    data(){
        return{
            visible:false,
            users:[],
            form:{}
        }
        
    },
    created(){
        this.loadUsers();
    },
    methods:{
        loadUsers(){
            let url = "http://121.199.43.121:8090/user/find_all";
            get(url).then((response) =>{
                this.users=response.data;
            })
        },
        submit(form){
            let url = "http://121.199.43.121:8090/user/save_or_edit";
            post(url,this.form).then((response) =>{
                // 提示添加成功
                this.$message({type:'success',message:response.message})
                // 关闭模态框
                this.visible = false;
                // 刷新数据
                this.loadUsers();
            })
        },
         edit(row){
            // 将当前行信息绑定
            this.form = row;
            // 打开模态框
            this.visible = true;
        },
        del(row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          let url = "http://121.199.43.121:8090/user/del_by_id";
          get(url,{id:row.id}).then((response) =>{
            // 提示
            this.$message({type:'success',message:response.message})
            // 刷新数据
            this.loadUsers();
          })
        })

        }
        
    }
}
</script>